<template>
  <div class="user_info">
    <div class="author-title" v-if="props.showAuthor">
      作者信息
    </div>
    <div class="user_info_box">
      <div class="account_picture">
        <el-avatar :size="50" :src="circleUrl" />
      </div>
      <div class="account_detail">
        <span class="account-tatile"><a>{{ userInfo.username }}</a></span>
        <el-tag class="ml-2" type="success">已认证</el-tag>
        <p>
          <span style="padding-right: 10px;"><el-icon>
              <Memo />
            </el-icon>作品数:{{ userInfo.project_num }}</span>
          <span><el-icon><svg-icon name="dinYue" /></el-icon>订阅数:{{ userInfo.like_num }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, watch } from "vue"
import {
  Memo,
} from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'
import Service from '@/utils/axios'
const useUser = useUserStore();

// 父子组建传参
const props = defineProps<{
  targetUserId?: string,
  showAuthor?: boolean,
}>()

watch(
  () => props.targetUserId,  //监听
  () => {
    handleGetUserInfo();
  }
)

// 头像
const baseUrl = `http://127.0.0.1:3000`;
const centerUrl = `\\uploads`;
const state = reactive<any>({
  aratarUrl: `\\avatar\\default_svg.svg`, // 头像url默认值
  circleUrl: ``,
  // 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
})
const { circleUrl } = toRefs(state)
// 请求头像方法
const handleGetAvator = () => {
  // 获取头像url拼接
  const localAvatarUrl = userInfo.user_pic;
  // console.log('old', state.aratarUrl)
  state.aratarUrl = localAvatarUrl ? localAvatarUrl : state.aratarUrl;
  // console.log('new', state.aratarUrl)
  state.circleUrl = `${baseUrl}${centerUrl}${state.aratarUrl}`
  // console.log('state.circleUrl', state.circleUrl)
}
// 获取用户信息
let userInfo: any = {};
const handleGetUserInfo = () => {
  Service.get('/bkapi/userinfo/getUserinfoByUsername', {
    params: {
      username: props.targetUserId,
    }
  }).then((res: any) => {
    userInfo = res.data?.data;
    handleGetAvator()
  })
}

onMounted(() => {
  // 请求头像
  // handleGetAvator();

})
</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色

.user_info {
  min-width: 230px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .1);

  display: flex;
  flex-direction: column;
  justify-content: space-around;
    align-items: center;
  .author-title {
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 20px;
    border-bottom: 1px solid @border-color;
  }

  &_box {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .account_detail {
      .account-tatile {
        font-size: 16px;
      }

      p {
        padding-top: 5px;
        font-size: 14px;

        span i {
          vertical-align: -10%;
        }
      }
    }
  }
}
</style>